<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ImageApi } from '@/api/ImageApi.ts'
import type { ImageVO } from '@/api/Image.ts'
import { ProblemApi } from '@/api/ProblemApi.ts'
import type { ProblemVO } from '@/api/Problem.ts'
import httpClient from '@/api/client.ts'
import {useUserInfoStore} from "@/stores/UserInfo.ts";
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'

const userInfoStore = useUserInfoStore();
const router = useRouter()

const carouselImages = ref<ImageVO[]>([])
const topProblems = ref<ProblemVO[]>([])
const loading = ref(false)
const carouselRef = ref()

const toUrl = (path: string) => {
  if (!path) return ''
  if (/^https?:\/\//.test(path)) return path
  const base = (httpClient.defaults?.baseURL || '').replace(/\/$/, '')
  const p = path.startsWith('/') ? path : `/${path}`
  return `${base}${p}`
}

const fetchData = async () => {
  loading.value = true
  try {
    const [images, problems] = await Promise.all([
      ImageApi.searchPublic({ id: null, type: 'CAROUSEL', enabled: true, pageNumber: 1, pageSize: 10 }),
      ProblemApi.search({ title: null, difficulty: null, pageNumber: 1, pageSize: 2 } as any),
    ])
    carouselImages.value = images?.records || []
    topProblems.value = problems?.records?.slice(0, 2) || []
  } finally {
    loading.value = false
  }
}

onMounted(fetchData)

const gotoProblem = (id: string) => {
  router.push({ name: 'problemDetail', params: { id } })
}
</script>

<template>
  <div class="w-full max-w-[1080px] mx-auto px-4">
    <a-card :loading="loading" class="w-full rounded-lg shadow-sm" :bodyStyle="{ padding: '0' }">
      <div class="relative">
        <a-carousel ref="carouselRef" autoplay>
          <div v-for="item in carouselImages" :key="item.id">
            <img :src="toUrl(item.path)" alt="" class="w-full h-[360px] object-cover" />
          </div>
        </a-carousel>
        <a-button
          shape="circle"
          class="!absolute left-3 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white shadow"
          @click="carouselRef?.prev()"
        >
          <template #icon>
            <LeftOutlined />
          </template>
        </a-button>
        <a-button
          shape="circle"
          class="!absolute right-3 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white shadow"
          @click="carouselRef?.next()"
        >
          <template #icon>
            <RightOutlined />
          </template>
        </a-button>
      </div>
    </a-card>

    <div class="mt-6">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" v-for="p in topProblems" :key="p.id">
          <a-card :title="p.title" class="rounded-lg shadow-sm" :hoverable="true">
            <div class="line-clamp-2 text-gray-600 mb-3">{{ p.description }}</div>
            <a-space>
              <a-button type="primary" @click="gotoProblem(p.id)">去做题</a-button>
              <router-link :to="{ name: 'problemDetail', params: { id: p.id } }">查看详情</router-link>
            </a-space>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
  </template>

<style scoped>

</style>
